<template>
  <div class="app-container">
    <h1>App 根组件</h1>
      <button @click="onReset">点击重置子组件left里的count值</button>
    <hr />
      <input type="text" @blur="showButton" v-if="showVisible" ref="iptRef">
      <button v-else @click="showInput">点我显示文本框</button>
    <hr/>
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
<!--        获取left组件实例，通过ref 可以调用子组件  方法，属性 -->
        <Left ref="myLeft"></Left>
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
export default {
    data() {
        return {
            showVisible: false
        }
    },
    components: {Left},
    comments: {
        Left
    },
    methods: {
        showInput() {
          this.showVisible = true
            // this.$nextTick(cb)：组件的$nextTick(cb)方法，会把cb回调推迟到下一个dom更新周期之后执行，
            // 通俗的理解是：等组件的dom更新完成之后，再执行cb回调函数，从而能保证cb回调函数可以操作到最新的dom元素
            this.$nextTick(() => {
                this.$refs.iptRef.focus()
            })
        },
        showButton() {
            this.showVisible = false

        },
        onReset() {
            // this.$refs.myLeft.count = 0
            this.$refs.myLeft.reset()
        }
    }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
